<template>
  <div class="tags-container">
    <el-tag v-for="(tag, index) in tags" :key="index" class="tag-item" effect="plain" size="small" :type="getTagType(index)">
      {{ tag }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import type { TagProps } from 'element-plus'
import { computed } from 'vue'

const props = defineProps<{
  modelValue: any
  types?: TagProps['type'][]
}>()

const tags = computed(() => {
  if (!props.modelValue) return []
  if (Array.isArray(props.modelValue)) {
    return props.modelValue.filter((tag) => tag !== '-' && tag !== null && tag !== undefined)
  }
  if (typeof props.modelValue === 'string') {
    console.log('String value:', props.modelValue)
    return props.modelValue.split(',').filter(Boolean)
  }
  console.log('Default case:', props.modelValue)
  return [props.modelValue].filter((tag) => tag !== '-' && tag !== null && tag !== undefined)
})

const getTagType = (index: number): TagProps['type'] => {
  if (props.types && props.types[index]) {
    return props.types[index]
  }
  return 'info' // 默认类型
}
</script>

<script lang="ts">
export default {
  name: 'Tags',
}
</script>

<style scoped>
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag-item {
  margin: 0;
}
</style>
